<template>
    <el-card shadow="never" style="border: none; border: 1px solid palegoldenrod; width: 1150px;">
        <div class="search-container">
            <p class="textitem flex-start" style="font-size: 18px; margin-bottom: 16px;">
                服务项目管理
            </p>
            <el-form class="search-form" @submit.prevent>
                <el-row :gutter="20">
                    <el-col :span="18" class="no-padding">
                        <el-row :gutter="16">
                            <!-- 项目类型下拉框 -->
                            <el-col :span="8">
                                <el-form-item label="项目类型">
                                    <el-select v-model="formItem.type" style="width: 200px;height:40px;"
                                        placeholder="请选择项目类型">
                                        <el-option v-for="item in uniqueTypes" :key="item" :label="item"
                                            :value="item"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>

                            <!-- 项目名称输入框 -->
                            <el-col :span="16">
                                <el-form-item>
                                    <el-input v-model="formItem.name" style="width: 376px; height:40px;" size="large"
                                        placeholder="请输入项目名称关键字" :suffix-icon="Search"
                                        @keyup.enter.prevent="onSearch" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-col>

                    <el-col :span="6" class="flex-end">
                        <!-- <el-button type="primary" @click="handleAdd">新增服务项目</el-button> -->
                        <el-button type="primary">新增服务项目</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <!-- 表格 -->
        <el-table :data="tableData.rows"
            :header-cell-style="{ background: '#ccddff', fontWeight: 'normal', color: '#515a6e' }"
            style="font-size: 13px;">
            <el-table-column label="项目编号" prop="_id" width="118">
                <template #default="scope">
                    {{ scope.row._id ? scope.row._id.substring(0, 10) : '' }}
                </template>
            </el-table-column>

            <el-table-column label="项目名称" prop="name" width="120" required align="left" />
            <el-table-column label="次数" prop="count" width="136" />
            <el-table-column label="项目类型" prop="type" width="106" required />
            <el-table-column label="项目原价（元）" width="127" prop="price" align="center"
                header-cell-class-name="price-header">
                <template #default="scope">
                    <span class="price-value">{{ (scope.row.price - 0).toFixed(2) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="项目介绍" width="376" prop="intro" />
            <el-table-column label="操作" width="120">
                <template #default="scope">
                    <!-- <el-button link type="primary" @click="handleEdit(scope.row)">修改</el-button> -->
                    <el-button link type="primary">修改</el-button>
                    <el-button link style="color:#FA7468;" plain @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div v-if="pageData" class="flex-end" style="margin-top: 22px;">
            <el-pagination v-model:current-page="pageData.currentPage" v-model:page-size="pageData.pageSize"
                :total="tableData.total ?? 0" :page-sizes="[5, 10, 20, 40, 100]" background
                layout="total, sizes, prev, pager, next, jumper" />
        </div>
    </el-card>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, computed } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { deleteServiceItemsApi, findServiceItemsApi } from '@/api/service';

// 定义服务项目的类型
interface ServiceItem {
    _id: string;
    name: string;
    type: string;
    count: number;
    price: number;
    intro: string;
}

// 表格数据和分页数据
const tableData = reactive<{ rows: ServiceItem[]; total: number }>({ rows: [], total: 0 });
const pageData = ref({
    currentPage: 1,
    pageSize: 10
});

// 搜索表单数据
const formItem = ref({
    name: '',
    type: ''
});

// 计算属性：从表格数据中提取唯一的项目类型
const uniqueTypes = computed(() => {
    const types = new Set(tableData.rows.map(item => item.type));
    return Array.from(types);
});

// 初始化加载数据
onMounted(() => {
    findServiceItems();
});

// 查询服务项目数据
function findServiceItems() {
    findServiceItemsApi({
        page: pageData.value.currentPage,
        pageSize: pageData.value.pageSize,
        name: formItem.value.name,
        type: formItem.value.type
    }).then(res => {
        console.log('444', res);

        if (res.code === 200) {

            tableData.rows = res.data.rows;
            tableData.total = res.data.total;
        }
    });
}

// 搜索按钮点击事件
function onSearch() {
    findServiceItems();
}





function handleDelete(row: ServiceItem) {
    // 弹出确认框
    ElMessageBox.confirm(
        `确定删除此项目信息吗？`,
        '删除确认',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
        }
    )
        .then(() => {
            deleteServiceItemsApi({ _id: row._id }).then(res => {
                if (res.code === 200) {
                    tableData.rows = tableData.rows.filter(item => item._id !== row._id);
                    ElMessage.success('删除成功');
                } else {
                    ElMessage.error('删除失败');
                }
            }).catch(() => {
                ElMessage.error('删除失败，请重试');
            });
        })
        .catch(() => {
            ElMessage.info('已取消删除');
        });
}


</script>

<style scoped>
.search-container {
    padding: 20px 0;
    background: #fff;
    border-radius: 4px;
}

.search-form .el-row {
    display: flex;
    align-items: center;
}

.search-form .el-col>.el-row {
    width: 100%;
}

.search-form .el-form-item {
    margin-bottom: 0 !important;
    margin-right: 15px;
}

.search-form .el-input,
.search-form .el-select {
    height: 40px;
}

.search-form .el-form-item__label {
    padding: 0 8px 0 0;
    line-height: 40px;
}

/* 表格样式 */
.textitem {
    position: relative;
    padding-left: 12px;
}

.textitem::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 20px;
    background-color: rgba(41, 132, 248, 1);
    border-radius: 8px;
}

.price-header .cell {
    color: #FA7468 !important;
    font-weight: bold;
}

.price-value {
    color: #FA7468;
    font-weight: bold;
}


.no-padding {
    padding-left: 0 !important;
}

.flex-start {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.flex-end {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

::placeholder {
    color: rgb(204, 204, 204);
}
</style>